<template>
  <s-layout id="layout" :title="state.type==1?'查看员工日报':state.type==2?'查看员工周报':'查看员工月报'" navbar="normal" leftIconColor="#333" :autoBack="false"
 :bgColor="state.bgColor" :tabbarshow='false'
		:titleStyle="{ color: '#333', fontSize: '32rpx' }">
  <view class="call_on list_box" :style="{paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
    <view class="menu">
      <s-search-keyword :placeholder="'搜索员工名字'" @searchKeyWord="searchKeyWord" ></s-search-keyword>
    </view>
    <scroll-view   scroll-y class="comprehensive"  v-if="list.length" @scrolltolower='listScrolltolower' >
      <view class="item_wrap" >
        <view class="item" v-for="(item,index) in list" :key="index" @click="lookStaffDetail(item)">
          <view class="item_left">
            <up-avatar :src="`${baseUrl}`+ item.avatar" shape="circle" size="60"></up-avatar>
            <view class="item_left_box">
              <view class="name">{{ item.nickname }}<text  :class="item.is_sub == true?'status':'blue'">{{ item.is_sub == true?'已提交':'未提交' }}</text></view>
              <view class="title">{{ item.group.name }}</view>
            </view>
          </view>
          <view class="item_right">
            <u-icon size="20" name="arrow-right" color="#0038F7" ></u-icon>
          </view>
        </view>
     
      </view>
      
    </scroll-view>
    
    <u-empty v-else mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
  </view>
   
  </s-layout>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import { onLoad,onReachBottom } from "@dcloudio/uni-app";
const userStore = sheep.$store('user');
import { ref ,reactive } from 'vue';
const { safeAreaInsets } = uni.getSystemInfoSync()
const state =  ref({
  bgColor:'#fff',
  type:'',
  date:'',
  user_id:'',

})
const  list = ref([])
onLoad((options) => {
  state.value.type = options.type
  state.value.date= options.date
  // state.value.user_id = options.user_id
  getStaffList()
})
    // 搜索
 const keywords = ref()
 const searchKeyWord = (srarch_value) => {
      keywords.value = srarch_value
      getStaffList()
    }



//数据请求

const getStaffList =  (params = null) => {
  if(state.value.type  == 1){
    let params = {
    date:state.value.date,
    type:state.value.type,
    keywords:keywords.value 
  }
    sheep.$api.report.getStaffAllList(params).then((res)=>{
        list.value =res?.data
       });
  }
  if(state.value.type  == 2){
    const datelist = state.value.date.split(' ~ ')
    let params = {
      start_date:datelist[0],
      end_date:datelist[1],
      type:state.value.type,
      keywords:keywords.value 
  }
    sheep.$api.report.getStaffAllList(params).then((res)=>{
        list.value =res?.data
       });
  }
  if(state.value.type  == 3){
    let params = {
      month:state.value.date,
      type:state.value.type,
      keywords:keywords.value 
  }
    sheep.$api.report.getStaffAllList(params).then((res)=>{
        list.value =res?.data
       });
  }
}
//数据跳转
const type = ref()
const lookStaffDetail = (e)=>{
  if(e.is_sub == false){
    sheep.$helper.toast('暂无提交');
			return;
  }else{
 
    sheep.$router.go('/subpackage/staff/workbench/daily_record/final_report_detail',{
      date:state.value.date,
      type:state.value.type,
      user_id:e.id 
    });

  }

}

</script>

<style lang="scss" scoped>
// 滚动
.comprehensive{
        width: calc(100% - 40rpx);
        background-color: rgba(0, 0, 0, 0);
        margin: 0 20rpx;
        height:81vh;
}
//列表
.call_on{
  width: 100%;
  height: 89vh;
  .list_box{
    width: 100%;
    height: auto;
  }

}
.loading-text {
		text-align: center;
		font-size: $uni-font-size-base;
		color: #666;
		padding: 20rpx 0 50rpx;
	}
  // 列表内容
  .item_wrap{
    border-radius: 18rpx;
    margin-top: 20rpx;
    padding: 20rpx 0;
    background: $uni-bg-color;
    .item{
      justify-content: space-between;
      display: flex;
      margin: 0 30rpx;
      border-bottom: 1rpx solid #efefef;
      align-items: center;
      &:last-child{border: none;}
      .item_left{
        width: 75%;
        padding: 25rpx 0 16rpx 10rpx;
        font-family: PingFangSC;
        color: $uni-text-color;
        display: flex;
        align-items: center;
        .item_left_box{
          margin-left: 16rpx;
          .name{
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 30rpx;
            .status{
              margin-left: 12rpx;
              border-radius: 18rpx;
              background-color: #FEF3E6;
              color: #F77500;
              padding: 3rpx 10rpx;
              font-weight: 500;
              font-size: 22rpx;
            }
            .blue{
              color: $uni-color-primary;
              font-weight: 500;
              font-size: 22rpx;
              padding: 3rpx 10rpx;
              margin-left: 12rpx;
              border-radius: 18rpx;
              background-color: #F9FAFF;
            }
          }
          .title{
            margin-top: 10rpx;
            color: #666666;
            font-weight: 500;
            font-size: $uni-font-size-sm;
          }
        }
      }
      .item_right{
        padding-right: 10rpx;
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: 400;
        font-size: 22rpx;
        display: flex;
        .name{
          margin-right: 6rpx;
        }
      }
    }
  }
  .menu{
    width:calc(100% - 40rpx);
    padding: 20rpx ;
    background: $uni-bg-color;

  }
</style>